<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程管理系统</title>
    <script src="js/base.js"></script>
    <style>
        /* 全局样式 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f0f2f5;
            height: 100vh;
            display: flex;
            overflow: hidden;
        }

        /* 左侧导航栏样式 */
        .sidebar {
            width: 220px;
            background-color: #2c3e50;
            color: #ecf0f1;
            height: 100%;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .sidebar-header {
            padding: 25px 0;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .sidebar-header h2 {
            margin: 0;
            font-size: 1.5rem;
        }

        .nav-links {
            margin-top: 20px;
        }

        .nav-links a {
            display: block;
            color: #ecf0f1;
            text-decoration: none;
            padding: 15px 25px;
            transition: all 0.3s ease;
            font-size: 1rem;
            border-left: 3px solid transparent;
        }

        .nav-links a:hover {
            background-color: #34495e;
            padding-left: 30px;
        }

        .nav-links a.active {
            background-color: #3498db;
            border-left: 3px solid #2980b9;
        }

        /* 主内容区域样式 */
        .main-content {
            flex: 1;
            padding: 30px;
            overflow-y: auto;
            height: 100%;
        }

        .page-title {
            color: #2c3e50;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #ddd;
        }

        /* 表格样式 */
        .table-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            margin-bottom: 30px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            text-align: center;
        }

        th, td {
            padding: 14px 12px;
            border-bottom: 1px solid #eee;
        }

        th {
            background-color: #2980b9;
            color: white;
            font-weight: 600;
        }

        tr:hover {
            background-color: #f8f9fa;
        }

        /* 按钮和链接样式 */
        .action-link {
            color: #3498db;
            text-decoration: none;
            font-weight: 600;
            padding: 5px 10px;
            margin: 0 5px;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .action-link:hover {
            color: #2980b9;
            background-color: #e8f4fd;
            text-decoration: none;
        }

        .danger-link {
            color: #e74c3c;
        }

        .danger-link:hover {
            color: #c0392b;
            background-color: #fdedeb;
        }

        button {
            padding: 8px 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: all 0.2s ease;
            margin: 5px;
        }

        button:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
        }

        button:disabled {
            background-color: #bdc3c7;
            cursor: not-allowed;
            transform: none;
        }

        input {
            padding: 8px 12px;
            margin: 5px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 0.9rem;
            width: 200px;
        }

        /* 分页样式 */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 30px;
        }

        .pagination button {
            padding: 8px 15px;
        }
    </style>
</head>
<body>
<!-- 左侧导航栏 -->
<div class="sidebar">
    <div class="sidebar-header">
        <h2>教师课程管理系统</h2>
    </div>
    <div class="nav-links">
        <a href="teacherIndex.html" class="active">课程管理</a>
        <a href="signIn.html">退出登录</a>
    </div>
</div>

<!-- 主内容区 -->
<div class="main-content">
    <h1 class="page-title">课程管理</h1>

    <div class="actions">
        <input id="searchKey" placeholder="请输入课程名"/><button onclick="onSearchClick();">查找课程</button>
        <button onclick="goAddCourse();">新增课程</button>
    </div>

    <div class="table-container">
        <table id="courseData">
            <tr>
                <td>课程号</td>
                <td>课程名称</td>
                <td>授课教师</td>
                <td>教室容量</td>
                <td>当前选课人数</td>
                <td colspan="3">操作</td>
            </tr>
        </table>
    </div>

    <div class="pagination" id="buttons"></div>

    <script>
            function goAddCourse(){
                window.location.href="addCourse.html";
            }

            let pageNo = 1;
            let pageSize = 5;
            let pageCount = 0;
            let arr = null;

            function loadData(){
                let searchKey = document.getElementById("searchKey").value;
                let url = "http://localhost:8080/teacher/page?pageNo=" + pageNo + "&pageSize=" + pageSize + "&searchKey=" + searchKey;
                $.rest(url, "get", null, function (r) {
                    if (r.code == 200) {
                        arr = r.data.data;
                        pageCount = r.data.pageCount;
                        let courseDataInnerHTML = `
                            <tr>
                                <td>课程号</td>
                                <td>课程名称</td>
                                <td>授课教师</td>
                                <td>教室容量</td>
                                <td>当前选课人数</td>
                                <td colspan="3">操作</td>
                            </tr>
                        `;

                        for (let i = 0; i < arr.length; i++) {
                            let item = arr[i];
                            courseDataInnerHTML += `
                                <tr>
                                    <td>${item.id}</td>
                                    <td>${item.name}</td>
                                    <td>${item.tname}</td>
                                    <td>${item.maxLimit}</td>
                                    <td>${item.count}</td>
                                    <td><a href='#' class="action-link" onclick='return onEditClick(${i})'>修改</a></td>
                                    <td><a href='#' class="action-link danger-link" onclick='return onDelClick(${i})'>删除</a></td>
                                    <td><a href='#' class="action-link" onclick='return onManagerClick(${i})'>管理当前选课</a></td>
                                </tr>
                            `;
                        }

                        document.getElementById("courseData").innerHTML = courseDataInnerHTML;

                        // 生成分页按钮
                        let buttonsInnerHTML = "";
                        if (pageCount > 0) {
                            buttonsInnerHTML = `<button onclick='onPrevClick();' ${pageNo === 1 ? 'disabled' : ''}>上一页</button>`;

                            for (let i = 0; i < pageCount; i++) {
                                buttonsInnerHTML += `<button onclick='onPageClick(${i + 1})' ${pageNo === i + 1 ? 'style="background-color:#2980b9"' : ''}>${i + 1}</button>`;
                            }

                            buttonsInnerHTML += `<button onclick='onNextClick();' ${pageNo === pageCount ? 'disabled' : ''}>下一页</button>`;
                        }

                        document.getElementById("buttons").innerHTML = buttonsInnerHTML;
                    }
                });
            }

            loadData();

            function onPageClick(pNo) {
                pageNo = pNo;
                loadData();
            }

            function onPrevClick() {
                if (pageNo > 1) {
                    pageNo--;
                    loadData();
                }
            }

            function onNextClick() {
                if (pageNo < pageCount) {
                    pageNo++;
                    loadData();
                }
            }

            function onSearchClick() {
                pageNo = 1;
                loadData();
            }

            function onEditClick(index) {
                let editCourse = arr[index];
                localStorage.setItem("editCourse_id", editCourse.id);
                localStorage.setItem("editCourse_name", editCourse.name);
                localStorage.setItem("editCourse_tname", editCourse.tname);
                localStorage.setItem("editCourse_maxLimit", editCourse.maxLimit);
                window.location.href = "editCourse.html";
            }

            function onDelClick(index) {
                if (confirm("确定要删除这门课程吗？")) {
                    let id = arr[index].id;
                    $.rest("http://localhost:8080/teacher/delCourse?id=" + id, "get", null, function (r) {
                        if (r.code == 200) {
                            loadData();
                        }
                    });
                }
                return false;
            }

            function onManagerClick(index) {
                let item = arr[index];
                localStorage.setItem("managerCourseId", item.id);
                localStorage.setItem("stuCount", item.count);
                localStorage.setItem("maxLimit", item.maxLimit);
                window.location.href = "managerCourse.html";
            }
        </script>
</div>
</body>
</html>